<!doctype html>
<!--计算机一班石敬毅-->
<html>
<head>
<meta charset="utf-8">
<title>传智学员信息登记表</title>
<style>
/*示例图到底啥字体看了半天没看出来，暂且用宋体吧*/
	body{
		font-size: 14px;
		font-family: "宋体";
	}
	h1{
	    padding-left: 60px;
	    font-family: "黑体";
	}
	form{
		position: absolute;
		left: 42%;
		top: 10%;
		text-align: left;
		width: 650px;
	}
	span{
		display: inline-block;
		text-align: left;
	
	}
	input{
		border:1px solid rgba(201,210,155,1.00);
		indent: 2em;
	}
	#indent{
		text-indent: -1em;
	}
	
	#dateinput{
		padding-right:63px;
	}
/*日期表单拉长*/
	.btn{
		background-color: rgba(147,181,24,1.00);
		border: 1px solid rgba(201,210,155,1.00);
		border-radius: 3px;
		color: white;
		font-size: 20px;
		margin-left: 50px;
		text-align: center;
		width: 100px;
	}
</style>
</head>

<body>
<img src="images/form_bg.jpg" alt=""><div>
<form action="#" method="post">
<!--对齐忘了怎么搞了，暂时用缩进把第一个往前挪，反正人和代码能跑一个就行-->
<h1>传智学员信息登记表</h1>
<p><span id="indent">用户登录名：</span><input type="text" placeholder="myemail163.com" readonly >（不能修改，只能查看）</p>
<p><span>真实姓名：</span><input type="text" placeholder="例如:王明" pattern="^[\u4e00-\u9fa5]{0,}$" >（必须填写,只能输入汉字）</p>
<p><span>真实年龄：</span><input type="text" value="24">（必须填写）</p>
<p><span>出生日期：</span><input type="date" id="dateinput">（必须填写）</p>
<p><span>电子邮箱：</span><input type="text" placeholder="123456@126.com">（必须填写）</p>
<p><span>身份证号：</span><input type="text" pattern="^\d{15}|\d{18}$">（必须填写，能够以数字、字母x结尾的短身份证号）</p>
<p><span>手机号码：</span><input type="text">（必须填写）</p>
<p><span>个人主页：</span><input type="url" list="url_list">（请选择网址）</p>
	<datalist id="url_list"><!--匹配id-->
		<option label="新浪" value="http://www.sina.com.cn"></option>
		<option label="搜狐" value="http://www.sohu.com"></option>
		<option label="传智" value="http://www.itcast.cn"></option>
	</datalist>
<p><span>幸运颜色：</span><input type="color" value="#F0FF03">（请选择你喜欢的颜色）</p>
<br><br>
<input type="button" value="提交" class="btn">
<input type="button" value="重置" class="btn">

</form></div>
</body>
</html>
